<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<u-button type="primary" @click="change">弹出层</u-button>
		<view class="text-area">
			<text class="title">{{ sex }}</text>
		</view>
		<up-tabbar
			:value="value6"
			@change="name => value6 = name"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<up-tabbar-item text="首页" icon="home" ></up-tabbar-item>
			<up-tabbar-item text="我的" icon="account" ></up-tabbar-item>
		</up-tabbar>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia'
const userStore = useUserStore();
// 直接解构仍保持响应式
const { sex } = storeToRefs(userStore);
const title = ref('taskManges');
const value6  =ref(0)

const change = () => {
	userStore.setSex('woman');
};
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.title {
		font-size: 36rpx;
		color: #8f8f94;
		height: 1000px;
	}
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}
</style>
